import { useRouteError } from 'react-router-dom';

export function ErrorPage() {
  const error: any = useRouteError();

  return (
    <div id="error-page" className="h-300 flex items-center w-full">
      <div className="w-full text-center">
        <h1>Oops!</h1>
        <p>Sorry, an unexpected error has occurred.</p>
        <p>
          <i className="text-14 text-red-500 bg-gray-200 inline-block px-12 py-4">{error.statusText || error.message}</i>
        </p>
      </div>
    </div>
  );
}
